<template>
	<msgModal ref="msgModalRef"/>
	<main class="zitiorder">
		<!-- 添加CustomConfirm组件 -->
		<CustomConfirm 
			:visible="confirmVisible"
			title="取货确认"
			:message="msgTitle"
			confirm-text="确定"
			cancel-text="取消"
			@confirm="confirmComplete"
			@cancel="cancelComplete"
		/>
		
		<!-- 添加NumericKeyboard组件 -->
		<NumericKeyboard
			v-model:visible="memberSearchShow"
			:initial-value="phoneNumSearch"
			title="请输入手机号码"
			@input="handleKeyboardInput"
			@confirm="handleKeyboardConfirm"
			@cancel="handleKeyboardCancel"
		/>
	
		<!-- 优化订单详情弹框 -->
		<Transition name="orderDetailModel">
			<div class="orderDetailModel" v-show='orderDetailShow'>
				<div class="modelInfo detail-dialog">
					<div class="detail-header">
						<h3>订单详情</h3>
						<el-button @click="orderDetailShow = false" class="close-btn" type="text">
							<i class="el-icon-close"></i>
						</el-button>
					</div>
					<div class="detail-content">
						<div class="order-info-section">
							<h4>订单信息</h4>
							<div class="order-info-grid">
								<div class="info-item">
									<span class="label">订单号:</span>
									<span class="value">{{orderInfo.orderNumber}}</span>
								</div>
								<div class="info-item">
									<span class="label">状态:</span>
									<span class="value status" v-bind:class="{  'fail': orderInfo.status == 1,'success': orderInfo.status == 2,'refound': orderInfo.status == 3 }">{{orderInfo.statusTitle}}</span>
								</div>
								<div class="info-item">
									<span class="label">时间:</span>
									<span class="value">{{orderInfo.created_at}}</span>
								</div>
								<div class="info-item">
									<span class="label">付款方式:</span>
									<span class="value">{{orderInfo.payTypeTitle}}</span>
								</div>
								<div class="info-item">
									<span class="label">总量:</span>
									<span class="value">{{orderInfo.allNum}}</span>
								</div>
								<div class="info-item">
									<span class="label">总价:</span>
									<span class="value price">￥{{orderInfo.allPrice}}</span>
								</div>
								<div class="info-item full-width">
									<span class="label">自提信息:</span>
									<span class="value">{{orderInfo.pickName}} ({{orderInfo.pickPhone}})</span>
								</div>
								<div class="info-item full-width">
									<span class="label">备注:</span>
									<span class="value">{{orderInfo.remark || '无'}}</span>
								</div>
							</div>
						</div>
						
						<div class="product-section">
							<h4>商品信息</h4>
							<table class="detail-table">
								<thead>
									<tr>
										<th class="product-name">商品名称</th>
										<th class="product-price">单价</th>
										<th class="product-quantity">数量</th>
										<th class="product-total">总价</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(data,index) in orderInfoDetail" :key="index">
										<td class="product-name">{{ data.goodName }}</td>
										<td class="product-price">￥{{ data.goodPrice }}</td>
										<td class="product-quantity">× {{ data.goodNum }}</td>
										<td class="product-total">￥{{ data.allPrice }}</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="detail-footer">
						<el-button @click="orderDetailShow = false" type="primary">关闭</el-button>
					</div>
				</div>
			</div>
		</Transition>
		
		<div class="page-header">
			<h2>自提订单管理</h2>
		</div>
		<div class="ordertop">
			<div class="search-section">
				<div class="search-container">
					<div class="search-input-group">
						<span class="search-icon">🔍</span>
						<input 
							class="search-input" 
							@click="memberSearchShow = true;" 
							v-model="phoneNumSearch" 
							placeholder="请输入手机号查询配送订单"
							readonly
						>
					</div>
					<button @click="searchOrderInfo" class="search-btn">查询</button>
				</div>
			</div>
		</div>
		<div class="table-container">
			<table class="orderinfo">
				<thead class="headerinfo">
					<tr class="tr">
						<td class="title">自提信息</td>
						<td class="title">金额</td>
						<td class="title">数量</td>
						<td class="title">时间</td>
						<td class="title">状态</td>
						<td class="operation">操作</td>
					</tr>
				</thead>
				<tbody class="forminfo">
					<tr class="tr" v-for="(data,index) in orderList" :key="index">
						<td class="title">{{ data.pickName }}({{ data.pickPhone }})</td>
						<td class="title price">￥{{ data.allPrice }}</td>
						<td class="title">{{ data.allNum }}</td>
						<td class="title">{{ data.created_at }}</td>
						<td class="title">
							<span class="status-tag" :class="getStatusClass(data.status)">{{ data.statusTitle }}</span>
						</td>
						<td class="operation">
							<el-button @click="orderDetail(data.id)" type="info" size="small" class="action-button">详情</el-button>
							<el-button @click="orderComplete(data.id)" v-if="data.status == 2" type="success" size="small" class="action-button">取货</el-button>
						</td>
					</tr>
					<tr v-if="!orderList || orderList.length === 0">
						<td colspan="6" class="empty-data">暂无数据</td>
					</tr>
				</tbody>
			</table>
		</div>
		<!-- 添加分页组件 -->
		<div class="pagination-container">
			<el-pagination
				background
				layout="total, prev, pager, next"
				:total="total"
				:page-size="pageSize"
				:current-page="currentPage"
				:prev-text="'上一页'"
				:next-text="'下一页'"
				:pager-count="7"
				@current-change="handleCurrentChange"
			>
				<template #total>
					总数：{{ total }}
				</template>
			</el-pagination>
		</div>
    </main>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import useApi from '../useApi';
import msgModal from '../components/msgModal.vue'
// 引入CustomConfirm组件
import CustomConfirm from './CustomConfirm.vue'
import { onMounted } from 'vue';
// 引入NumericKeyboard组件
import NumericKeyboard from './NumericKeyboard.vue'

// 添加分页相关变量
let currentPage = ref(1);
let pageSize = ref(10);
let total = ref(0);

onMounted(() => {
	searchOrderInfo();
});

const msgModalRef = ref(msgModal);
const showModal = (title,times=1000) => {
	if(msgModalRef.value){
		msgModalRef.value.openMsg(title,times);
	}
}

// 添加CustomConfirm相关的状态
let confirmVisible = ref(false);
let phoneNumSearch = ref(''),memberSearchShow = ref(false),orderList:any = ref([]),optionType = ref(1);
let orderDetailShow = ref(false),orderInfoDetail:any = ref({}),msgTitle = ref(''),thisOrderId = ref(0);
// 添加orderInfo变量
let orderInfo:any = ref({});

// 获取状态样式类
const getStatusClass = (status) => {
	switch(status) {
		case 1: return 'status-pending';
		case 2: return 'status-success';
		case 3: return 'status-cancel';
		default: return '';
	}
}

const orderDetail = async(id) => {
	// 保持原有代码不变
	orderDetailShow.value = true;
	let bodyData = ref({});
    bodyData.value = {
        id:id
    }
    const options:any = {
        headers: {
            "Content-Type": "application/json",
            "token":localStorage.getItem('token')
        },
        method: "POST",
        body:JSON.stringify(bodyData.value)
    };
    let res:any = await useApi('index/getMallOrderDetail',options); 
    if(res.code == 1){
        orderInfoDetail.value = res.data;
    }else{
        showModal(res.msg);
    }
    
    // 获取订单基本信息
    res = await useApi('index/getMallOrderInfo',options); 
    if(res.code == 1){
        orderInfo.value = res.data;
    }else{
        showModal(res.msg);
    }
}

// 修改取货确认方法
const orderComplete = (id) =>{
	optionType.value = 1;
	// 使用CustomConfirm替代原来的msgTitleShow
	confirmVisible.value = true;
	thisOrderId.value = id;
	msgTitle.value = '确定要完成取货吗？';
}

// 确认取货
const confirmComplete = async() => {
	let bodyData = ref({});
    bodyData.value = {
        id:thisOrderId.value,
		type:optionType.value
    }
    const options:any = {
        headers: {
            "Content-Type": "application/json",
            "token":localStorage.getItem('token')
        },
        method: "POST",
        body:JSON.stringify(bodyData.value)
    };
	
	let res:any = await useApi('index/orderComplete',options); 
	if(res.code == 1){
		showModal('操作成功', 1000);
		getOrderInfo();
	} else {
		showModal(res.msg);
	}
	
	confirmVisible.value = false;
}

// 取消取货
const cancelComplete = () => {
	confirmVisible.value = false;
}

const searchOrderInfo = () =>{
	getOrderInfo();
}

const getOrderInfo = async()=>{
    let bodyData = ref({});
    bodyData.value = {
        phone:phoneNumSearch.value,
        page: currentPage.value,
        pageSize: pageSize.value
    }
    const options:any = {
        headers: {
            "Content-Type": "application/json",
            "token":localStorage.getItem('token')
        },
        method: "POST",
        body:JSON.stringify(bodyData.value)
    };
    let res:any = await useApi('index/getUserMallOrder',options); 
    if(res.code == 1){
        orderList.value = res.data.data || [];
        total.value = res.data.count || 0;
    }else{
        showModal(res.msg);
    }
}

// 添加分页变化处理函数
const handleCurrentChange = (val: number) => {
    currentPage.value = val;
    getOrderInfo();
}
// 处理数字键盘输入
const handleKeyboardInput = (value) => {
    phoneNumSearch.value = value;
}

// 处理数字键盘确认
const handleKeyboardConfirm = (value) => {
    phoneNumSearch.value = value;
    searchOrderInfo();
}

// 处理数字键盘取消
const handleKeyboardCancel = () => {
    memberSearchShow.value = false;
}

</script>

<style scoped>
.zitiorder {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 5px;
}

.page-header h2 {
  color: #303133;
  font-weight: 500;
  margin: 0;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}
.search-section {
	margin-bottom: 5px;
	
	.search-container {
		display: flex;
		align-items: center;
		gap: 15px;
		
		.search-input-group {
			flex: 1;
			position: relative;
			
			.search-icon {
				position: absolute;
				left: 12px;
				top: 50%;
				transform: translateY(-50%);
				color: #999;
			}
			
			.search-input {
				width: 100%;
				height: 42px;
				padding: 0 15px 0 40px;
				border-radius: 6px;
				border: 1px solid #ddd;
				font-size: 15px;
				transition: all 0.3s;
				
				&:focus {
					border-color: #1976D2;
					box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
					outline: none;
				}
				
				&::placeholder {
					color: #aaa;
				}
			}
		}
		
		.search-btn {
			height: 42px;
			padding: 0 25px;
			background-color: #1976D2;
			color: white;
			border: none;
			border-radius: 6px;
			font-size: 15px;
			cursor: pointer;
			transition: all 0.2s;
			
			&:hover {
				background-color: #1565C0;
			}
			
			&:active {
				transform: translateY(1px);
			}
		}
	}
}



/* 其他样式保持不变 */
.table-container {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 20px;
}

.orderinfo {
  width: 100%;
  border-collapse: collapse;
}

.headerinfo {
  background-color: #f5f7fa;
}

.headerinfo .tr .title {
  font-weight: bold;
  color: #606266;
  padding: 1px 15px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

.forminfo .tr .title {
  padding: 12px 15px;
  border-bottom: 1px solid #ebeef5;
  color: #606266;
}

.forminfo .tr:hover {
  background-color: #f5f7fa;
}

.price {
  color: #f56c6c;
  font-weight: bold;
}

.status-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-pending {
  background-color: #e6a23c;
  color: #fff;
}

.status-success {
  background-color: #67c23a;
  color: #fff;
}

.status-cancel {
  background-color: #f56c6c;
  color: #fff;
}

.action-button {
  margin: 0 5px;
}

.operation {
  white-space: nowrap;
}

.empty-data {
  text-align: center;
  padding: 30px 0;
  color: #909399;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 订单详情弹窗样式 */
.orderDetailModel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modelInfo {
  background-color: #fff;
  border-radius: 4px;
  width: 80%;
  max-width: 800px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px;
}

.detail-header {
  text-align: center;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

.detail-header h3 {
  margin: 0;
  color: #303133;
}

.detailtitle {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #ebeef5;
}

.detailtitle .title {
  padding: 8px;
}

.orderdetailinfo {
  max-height: 400px;
  overflow-y: auto;
}

.orderfooter {
  margin-top: 20px;
  text-align: right;
}

/* 数字键盘样式 */
.numKey {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.key {
  padding: 15px;
  font-size: 18px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.key:hover {
  background-color: #f5f7fa;
}

.key:active {
  background-color: #e6e6e6;
}

/* 订单详情弹窗样式 */
.detail-dialog {
  width: 700px;
  max-width: 90vw;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  padding: 0;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #409EFF;
  color: #fff;
  border-bottom: 1px solid #EBEEF5;
}

.detail-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.close-btn {
  color: #fff;
  font-size: 20px;
}

.detail-content {
  padding: 20px;
  max-height: 60vh;
  overflow-y: auto;
}

.order-info-section, .product-section {
  margin-bottom: 20px;
}

.order-info-section h4, .product-section h4 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  color: #303133;
  border-bottom: 1px solid #EBEEF5;
  padding-bottom: 10px;
}

.order-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-item.full-width {
  grid-column: span 2;
}

.label {
  color: #606266;
  margin-right: 8px;
  font-weight: 500;
}

.value {
  color: #303133;
}

.value.price {
  color: #F56C6C;
  font-weight: 600;
}

.value.status {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.value.status.fail {
  background-color: #E6A23C;
  color: #fff;
}

.value.status.success {
  background-color: #67C23A;
  color: #fff;
}

.value.status.refound {
  background-color: #F56C6C;
  color: #fff;
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
}

.detail-table th, .detail-table td {
  padding: 12px 8px;
  text-align: left;
  border-bottom: 1px solid #EBEEF5;
}

.detail-table th {
  background-color: #F5F7FA;
  color: #606266;
  font-weight: 500;
}

.product-name {
  width: 40%;
}

.product-price, .product-quantity, .product-total {
  width: 20%;
}

.detail-footer {
  padding: 15px 20px;
  text-align: right;
  border-top: 1px solid #EBEEF5;
  background-color: #F5F7FA;
}

/* 过渡动画 */
.msgTitlefade-enter-active,
.msgTitlefade-leave-active,
.memberRechargeSearch-enter-active,
.memberRechargeSearch-leave-active,
.orderDetailModel-enter-active,
.orderDetailModel-leave-active {
  transition: opacity 0.3s ease;
}

.msgTitlefade-enter-from,
.msgTitlefade-leave-to,
.memberRechargeSearch-enter-from,
.memberRechargeSearch-leave-to,
.orderDetailModel-enter-from,
.orderDetailModel-leave-to {
  opacity: 0;
}
</style>